<template>
  <div class="newCourseDesign">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增课程设计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" :model="form" label-width="100px" class="content fixed-form" :rules="rules">
      <el-form-item label="课设名称" prop="courseDesignName">
        <el-input v-model="form.courseDesignName" placeholder="请输入课设名称"></el-input>
      </el-form-item>
      <el-form-item label="课程名称" prop="trainingCourseID">
        <el-cascader
          v-model="selectedcourseInfo"
          :options="courseInfo"
          :show-all-levels="false"
          placeholder="请选择课程名称"
          @change="courseInfoChange"
          class="max-width">
        </el-cascader>
      </el-form-item>
      <el-form-item label="专业" prop="majorID">
        <el-select v-model="form.majorID"  placeholder="请选择专业" class="max-width">
          <el-option
            v-for="item in major"
            :label="item.majorName"
            :value="item.majorID">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-date-picker
          v-model="form.grade"
          align="right"
          type="year"
          class="max-width"
          placeholder="请选择年级"
          @change="getGrade">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="学年" prop="academicYear">
        <el-date-picker
          v-model="form.academicYear"
          align="right"
          type="year"
          class="max-width"
          placeholder="请选择学年"
          @change="getAcademicYear">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="学期" prop="term">
        <el-select v-model="form.term" placeholder="请输入学期" class="max-width">
          <el-option label="01" value="01"></el-option>
          <el-option label="02" value="02"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
      		<el-date-picker type="date" @change="changeStartTime"  placeholder="请输入开始时间" v-model="form.startTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
      		<el-date-picker type="date" @change="changeEndTime" placeholder="请输入结束时间" v-model="form.endTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="负责老师" prop="teacherID">
       <!-- <el-cascader
          :options="teacherInfo"
          :show-all-levels="false"
          placeholder="请输入老师名称"
          @change="teacherInfoChange"
          class="max-width">
        </el-cascader>-->
        <el-select
        	v-model="teacherID"
        	filterable
        	multiple
        	class="max-width"
        	placeholder="请输入老师名称"
        	@change="getTeacherID">
			    <el-option
			      v-for="item in teacherInfo"
			      :key="item.teacherID"
			      :label="item.teacherName"
			      :value="item.teacherID">
			    </el-option>
  				</el-select>
      </el-form-item>
      <el-form-item label="所带班级" prop="classID">
        <el-select v-model="form.classID" @click.native.prevent="getClassInfo" placeholder="请选择班级名称" class="max-width">
          <el-option
            v-for="item in classInfo"
            :label="item.className"
            :value="item.classID">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课设安排">
        <el-upload
          ref="upload1"
          :action="CAIUrl"
          name="courseArrangeInfoName"
          :auto-upload="false"
          :on-success="setCAI">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="课设内容">
        <el-upload
          ref="upload2"
          :action="CDIUrl"
          name="courseDesignInfoName"
          :auto-upload="false"
          :on-success="setCDI">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="6" v-model="form.remark1"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>export default {
	name: 'newCourseDesign',
	data() {
		return {
			form: {
				majorID: '',
				grade: '',
				academicYear: '',
				term: '',
				trainingCourseID: '',
				courseID: '',
				startTime: '',
				endTime: '',
				teacherID: '',
				classID: '',
				remark1: ''
			},

			rules: {
          courseDesignName: [
            {required: true, message: '请先输入课设名称', trigger: 'blur'}
          ],
          trainingCourseID: [
            {required: true, message: '请先选择课程', trigger: 'blur'}
          ],
          majorID: [
            {required: true, message: '请先选择专业', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '请先选择年级', trigger: 'blur'}
          ],
          academicYear: [
            {required: true, message: '请先选择学年', trigger: 'blur'}
          ],
          term: [
            {required: true, message: '请先选择学期', trigger: 'blur'}
          ],
          startTime: [
            {required: true, message: '请先选择开始时间', trigger: 'blur'}
          ],
          endTime: [
            {required: true, message: '请先选择结束时间称', trigger: 'blur'}
          ],
          teacherID: [
            {required: true, message: '请先选择老师', trigger: 'blur'}
          ],
          classID: [
            {required: true, message: '请先选择班级', trigger: 'blur'}
          ]
        },

			classID:"",
			teacherID:"",
			courseInfo: [],
			major: [],
			teacherInfo: [],
			classInfo: [],
			selectedcourseInfo: []
		}
	},
	created() {
		this.getCourseInfo();
		this.getMajor();
		this.getTeacherInfo();
		this.form.trainingCourseID = this.$route.query.trainingCourseID;
		this.classID = this.$route.query.classID;
		//this.form.classID = this.$route.query.classID;
		if(!(typeof(this.form.trainingCourseID) == "undefined")) {
			this.showSelectCourse()
		}
		this.getClassInfo()
	},
	methods: {
		showSelectCourse() {
			//console.log(this.classID);
			this.$http.get(`${this.$until.url}/courseDesign/getCourseWithID`, {
				params: {
              trainingCourseID:this.form.trainingCourseID,
              classID:this.classID
            },emulateJSON: true
			}).then((res) => {
				// 响应成功回调
				//console.log(res)
				for(var key in res.body) {
					this.form[key] = res.body[key]
				}
				this.setSelectedcourseInfo()
			}, (err) => {
				// 响应错误回调
				console.log("服务器异常！");
			})
		},
		getCourseInfo() {
			this.$http.get(`${this.$until.url}/courseDesign/getAllCourseWithMajor`).then((res) => {
				// 响应成功回调
				this.courseInfo = res.body

			}, (err) => {
				// 响应错误回调
				console.log("服务器异常！");
			})
		},
		getMajor() {
			this.$http.get(`${this.$until.url}/courseDesign/getMajorDesign`)
				.then((res) => {
					//console.log(res)
					this.major = res.body
				}, (err) => {
					// 响应错误回调
					//console.log(err)
				})
		},
		getTeacherInfo() {
			this.$http.get(`${this.$until.url}/courseDesign/getTeacherDesign`).then((res) => {
				// 响应成功回调
				this.teacherInfo = res.body

			}, (err) => {
				// 响应错误回调
				console.log("服务器异常！");
			})
		},
		getGrade(val) {
			this.form.grade = val
		},
		getAcademicYear(val) {
			this.form.academicYear = val
		},
		getClassInfo() {
			//this.form.classID = '';
			this.$http.post(`${this.$until.url}/courseDesign/getClassDesign`, { majorID: this.form.majorID }, { emulateJSON: true })
				.then((res) => {
					//console.log(res)
					this.classInfo = res.body
				}, (err) => {
					// 响应错误回调
					//console.log(err)
				})
		},
		onSubmit(formName){
			this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addCourseDesign();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
		},

		addCourseDesign() {
			//var formData = JSON.stringify(this.form); //表单数据 {emulateJSON:true}
			this.$http.post(`${this.$until.url}/courseDesign/insertDesignInfo`, this.form, { emulateJSON: true }).then((res) => {
				// 响应成功回调
				console.log("success");
				this.$notify({
					title: '成功',
					message: '新增课程设计成功',
					type: 'success'
				});
				this.$router.push({path:'/UploadCourseDesign'})
			}, (err) => {
				// 响应错误回调
				console.log("服务器异常！");
			});
		},
		submitUpload1() {
			this.$refs.upload1.submit();
		},
		submitUpload2() {
			this.$refs.upload2.submit();
		},
		setCAI(response, file, fileList) {
			for(var key in response) {
				this.form[key] = response[key]
			}
			//console.log(response)
		},
		setCDI(response, file, fileList) {
			for(var key in response) {
				this.form[key] = response[key]
			}
		},
		setSelectedcourseInfo() {
			var msg = [];
			msg.push(this.form.majorID);
			msg.push(this.form.trainingCourseID);
			this.selectedcourseInfo = msg
		},
		courseInfoChange(value) {
			this.form.trainingCourseID = value[1]
			//console.log(this.form.trainingCourseID)
		},
		/*teacherInfoChange(value) {
			this.form.teacherID = value[1]
		},*/
		getTeacherID(value){
			//console.log(value)
			var msg="";
			for(const key of value){
				msg+=key+","
			}
			msg = msg.substring(0,msg.length-1);
			//console.log(msg);
			this.form.teacherID=msg
		},
		changeStartTime: function(val) {
			this.form.startTime = val;
		},
		changeEndTime: function(val) {
			this.form.endTime = val;
		}
	},
	computed: {
		CAIUrl: function() {
			return `${this.$until.url}/courseDesign/uploadCourseArrangeInfo`
		},
		CDIUrl: function() {
			return `${this.$until.url}/courseDesign/uploadCourseDesignInfo`
		}
	}
}</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
